<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import useTable from "@/utils/useTable";
import {http} from "@/api";

/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
  openEdit,
  openDelete
} = useTable({
  requestFn: http.GiftList,
  routerPre: 'GiftList',
  params: {
    name: '',
  }
})
const rowItem = ref({})
const show1 = ref(false)
const sendForm = ref({
  name: '',
  way: '1',
  time: '1',
})
const userList = ref([])
const userListChecked = ref([])
const openSend = (row) => {
  rowItem.value = row
  show1.value = true
  sendForm.value = {
    name: '',
    way: '1',
    time: [],
  }
  http.Member.list({}).then(res => {
    userList.value = res.data
  })
}

const selectChange = (val) => {
  console.log(val)
  userListChecked.value = val
}
const saveSend = () => {
  http.GiftList.update({
    id: rowItem.value.id,
    status: 0
  }).then(e => {
    search()
    http.GiftSend.create({
      name: sendForm.value.name,
      way: sendForm.value.way,
      gift_id: rowItem.value.id,
      start_time: sendForm.value.time[0],
      end_time: sendForm.value.time[1],
      memberIdList: sendForm.value.way == 1 ? userList.value.map(item => item.id) : userListChecked.value.map(item => item.id)
    }).then(res => {
      show1.value = false
    })
  })

}
</script>


<template>
  <el-drawer v-model="show1" title="发放礼品" size="800px">
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show1 = false">取消</el-button>
        <el-button type="primary" @click="saveSend">
          确认
        </el-button>
      </span>
    </template>
    <el-form>
      <el-form-item label="发放方式">
        <el-radio-group v-model="sendForm.way" class="ml-4">
          <el-radio label="1" size="large">全部</el-radio>
          <el-radio label="2" size="large">部分</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="有效期">
        <el-date-picker
            v-model="sendForm.time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-table size="mini" :data="userList" v-if="sendForm.way == 2" @selection-change="selectChange">
          <el-table-column  type="selection">
          </el-table-column>
          <el-table-column label="姓名" prop="username">
          </el-table-column>
          <el-table-column label="手机" prop="phone">
          </el-table-column>
          <el-table-column label="头像">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <ViewImage type="image" :image-url="scope.row.avatar_url"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-tag :type="scope.row.status === 0 ? 'success' : 'error'">{{ scope.row.status === 0 ? '启用' : '禁用' }}</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </el-drawer>
  <PageMain title="礼品列表">
    <el-form label-suffix="：" inline>
      <el-form-item label="名称">
        <el-input v-model="searchParams.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="add-box">
      <el-button type="primary" :icon="Plus" @click="openAdd">添加</el-button>
    </div>
    <div class="table-box">
      <el-table :data="dataSource">
        <el-table-column label="礼品分类" prop="category.name">
        </el-table-column>
        <el-table-column label="礼品名称" prop="name">
        </el-table-column>
        <el-table-column label="封面">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <ViewImage type="image" :image-url="scope.row.image"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发放量" prop="sale_count">
        </el-table-column>
        <el-table-column label="兑换量" prop="collect_count">
        </el-table-column>
        <el-table-column label="库存" prop="store_count">
        </el-table-column>
        <el-table-column label="发放状态">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-tag :type="scope.row.status === 0 ? 'success' : 'error'">{{ scope.row.status === 0 ? '已发放' : '未发放' }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right">
          <template #default="scope" >
            <el-button type="text" v-if="scope.row.status === 1" @click="openSend(scope.row)">发放</el-button>
            <el-button type="text"  @click="openEdit(scope.row)">编辑</el-button>
            <el-button type="text" v-if="scope.row.status === 1" @click="openDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100, 200]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changePage"
      />
    </div>
  </PageMain>
</template>

<style scoped lang="scss">

</style>
